<script setup lang="ts">
import { reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { loginHg } from '../api/Login/index';

const router = useRouter();
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: false,
});
const onFinish = async (values: any) => {
  console.log(values);
  let res = await loginHg(values);

  if (res.data.code == 200) {
    message.success("登陆成功");
    console.log(res);

    window.localStorage.setItem('username', res.data.data.name)
    window.localStorage.setItem('token', res.data.data.token)
    router.replace('/home')
  } else {
    message.error(res.data.msg);
  }

};

const onFinishFailed = () => {
  message.info("请输入用户名或密码");
};
</script>

<template>
  <div class="login">
    <div class="login_content">
      <div class="login_left">
        <div style="font-size: 34px;">高效记录生活</div>
        <div style="font-size: 17px; color: #6E736F;">轻松收集，有效整理</div>
        <div>
          <img src="../assets//login.png" alt="">
        </div>
      </div>

      <div class="login_right">
        <div style="height: 110px; display: flex;justify-content: center;align-items: center;">
          <div>
            <img src="../assets//logo.png" alt="" style="width: 50px;height: 40px;">
          </div>
          <div style="font-size: 30px;color: #2C51E5; font-weight: 600; padding-left: 20px;">欢迎登陆</div>
        </div>
        <div style="text-align: center;">
          <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
            @finishFailed="onFinishFailed">
            <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名' }]">
              <a-input placeholder="用户名" v-model:value="formState.username" style="width: 400px;height: 40px;">
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
              <a-input-password placeholder="密码" v-model:value="formState.password" style="width: 400px;height: 40px;">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item>
              <a-form-item name="remember" no-style>
                <a-checkbox v-model:checked="formState.remember" style="padding-right:75px;">记住密码</a-checkbox>
              </a-form-item>
              <a class="login-form-forgot" href="" style="padding-left:75px;">忘记密码</a>
            </a-form-item>

            <a-form-item style="">
              <a-button type="primary" html-type="" class="login-form-button"
                style="width: 160px;height: 40px; border-radius: 50px; background-color: #fff;color: #000;border:1px solid #ccc;">
                重置
              </a-button>
              <a-button type="primary" html-type="submit" class="login-form-button"
                style="width: 160px;height: 40px;border-radius: 50px;">
                登陆
              </a-button>

            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.login_content {
  width: 1612px;
  height: 94%;
  margin-left: 2%;
  margin-top: 2%;
  background: rgb(255, 255, 255, 0.8);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.login_left {
  width: 800px;
  height: 600px;
  padding: 10px 40px 35px 40px;
  border-radius: 10px;
}

.login_right {
  width: 480px;
  height: 500px;
  background-color: #fffefe;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}

:deep(.ant-form-item-control-input-content) {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>